<template>
  <el-container class="GoodsList">
    <el-header class="mt20 flex">
      <span class="title fs18 mr10">我的订单列表</span>
      <!-- <Cbutton size="small" icon="el-icon-plus" @click.native="toModifyGoods('add')">评论商品</Cbutton> -->
      <el-divider />
    </el-header>
    <el-main>
      <div class="flexCenter">
        <el-radio-group v-model="listQuery.orderStatus" size="medium" class="flex">
          <el-radio-button label="" style="letter-spacing: 2px;">全 部</el-radio-button>
          <el-radio-button label="DFK" style="letter-spacing: 2px;">待付款</el-radio-button>
          <el-radio-button label="DFH" style="letter-spacing: 2px;">待发货</el-radio-button>
          <el-radio-button label="DSH" style="letter-spacing: 2px;">待收货</el-radio-button>
          <el-radio-button label="YWC" style="letter-spacing: 2px;">已完成</el-radio-button>
        </el-radio-group>
      </div>
      <el-table
        :data="tableData"
        class="mt20"
        style="width: 100%"
        border
      >
        <el-table-column label="下单时间" show-overflow-tooltip align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.createTime | setTime }}</template>
        </el-table-column>
        <el-table-column label="订单号" show-overflow-tooltip align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.orderId | isNullData }}</template>
        </el-table-column>
        <el-table-column prop="iconId" label="商品封面" align="center" min-width="10%">
          <template slot-scope="{row}">
            <Cimage :src="row.goods.iconId ? row.goods.iconId[0].url : ''" fit="cover" style="cursor: pointer;border-radius: 5px;" width="60px" height="60px" @click.native="openViewr(row.iconId[0].url)" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" show-overflow-tooltip align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.goods.name | isNullData }}</template>
        </el-table-column>
        <el-table-column label="购买信息" align="center" min-width="10%">
          <template slot-scope="{row}">
            <div v-for="(item, index) in row.sku_list" :key="index">
              <span v-for="(it, idx) in item.sku_name_arr" :key="idx">{{ it }}{{ idx+1 !== item.sku_name_arr.length ? '、' : '' }}</span>
              <span class="pl5">x{{ item.cart_num }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单总价" align="center" min-width="10%">
          <template slot-scope="{row}"><span style="color: #ff4b02">￥{{ row.sku_list | skuListPrice }}</span></template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" min-width="10%">
          <template slot-scope="{row}">
            <span :style="row.orderStatus | orderStatusColor">{{ row.orderStatus | orderStatusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="买家昵称" align="center" min-width="10%">
          <template slot-scope="{row}">{{ row.user.userName || isNullData }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="20%">
          <template slot-scope="{row}">
            <el-button v-if="row.orderStatus === 'YFK'" size="small" icon="el-icon-thumb" type="primary" @click="setDFH(row.id)">模拟发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Cpagination
        :total="listQuery.total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.size"
        position="fixed"
        @pagination="getList"
      />
    </el-main>
    <CImageViewer :viewer-image-url.sync="viewr.viewerImageUrl" :visible.sync="viewr.visible" />
  </el-container>
</template>
<script>
import setSkuData from '@/utils/set_Sku_data'
import {
  categoryGetOne,
  categoryGetTwo
} from '@/api/category'
import {
  myOrderGetList,
  myOrderSetDFH
} from '@/api/order'
export default {
  filters: {
    // 转换选择的sku规格名称
    skuListPrice(sku_list) {
      const prices = sku_list.map(item => item.price * item.cart_num)
      return prices.length > 0 ? prices.reduce((n, m) => n + m).toFixed(2) : 0
    },
    orderStatusText(status) {
      switch (status) {
        case 'YQX': return '订单已取消'
        case 'DFK': return '等待买家付款'
        case 'DFH': return '等待卖家发货'
        case 'DSH': return '卖家已发货'
        case 'DPJ': return '交易成功，待评价'
        case 'YWC': return '交易成功'
        default: return '状态异常'
      }
    },
    orderStatusColor(status) {
      switch (status) {
        case 'YQX': return 'color: #909399'
        case 'DFK': return 'color: #409EFF'
        case 'DFH': return 'color: #E6A23C'
        case 'DSH': return 'color: #F56C6C'
        case 'DPJ': return 'color: #67C23A'
        case 'YWC': return 'color: #67C23A'
        default: return 'color: #409EFF'
      }
    }
  },
  mixins: [setSkuData],
  data() {
    return {
      loading: true,
      tableData: [], // 商品数据
      listQuery: {
        page: 1,
        size: 10,
        orderStatus: '',
        total: 0
      },
      viewr: { // 图片预览数据
        visible: false,
        viewerImageUrl: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 模拟发货
    async setDFH(id) {
      const { code } = await myOrderSetDFH({ id, orderStatus: 'DSH' })
      if (code === 0) {
        this.$message.success('发货成功')
        this.getList()
      }
    },
    // 打开预览大图组件
    openViewr(url) {
      this.viewr.viewerImageUrl = [url]
      this.viewr.visible = true
    },
    // 初始化获取数据
    async getList() {
      const { code, data } = await myOrderGetList(this.listQuery)
      if (code === 0) {
        this.tableData = this.setSkuListText(data.list) // 数据格式化
        this.loading = false
        this.listQuery.total = data.total
      }
      console.log(data, 'data')
    },
    // 设置sku规格列表文字
    setSkuListText(data) {
      data.forEach((item) => {
        if (item.none_sku) {
          item.goods['cart_num'] = item.list[0].cart_num // 替换成已选择的组合列表（无规格只有一个组合列表数据）
          // 无规格商品
          item['sku_list'] = this.setSku_list(item.goods, 'none')
          item['spec_list'] = this.setSpec_list(item.goods.skuList, 'none')
        } else {
          item.goods['list'] = item.list // 替换成已选择的组合列表
          // 多规格商品
          item['sku_list'] = this.setSku_list(item.goods)
          item['spec_list'] = this.setSpec_list(item.goods.skuList)
        }
      })
      return data
    }
  }
}
</script>
<style lang="scss" scoped>
.primary{
  color: #409EFF;
}
</style>
